/**
 * 第三方库样式覆盖
 * 用于覆盖和自定义第三方组件库的样式
 */

@import './variables.scss';
@import './mixins.scss';

// ==================== Vant 组件样式覆盖 ====================

// 全局覆盖
:root {
  // 主色调
  --van-primary-color: #{$primary-color};
  --van-success-color: #{$success-color};
  --van-warning-color: #{$warning-color};
  --van-danger-color: #{$danger-color};
  --van-info-color: #{$info-color};
  
  // 文本颜色
  --van-text-color: #{$text-color};
  --van-text-color-2: #{$text-color-2};
  --van-text-color-3: #{$text-color-3};
  
  // 背景色
  --van-background-color: #{$background-color};
  --van-background-color-light: #{$background-color-light};
  
  // 边框色
  --van-border-color: #{$border-color};
  
  // 字体
  --van-font-family: #{$font-family};
  --van-font-size-xs: #{$font-size-xs};
  --van-font-size-sm: #{$font-size-sm};
  --van-font-size-md: #{$font-size-md};
  --van-font-size-lg: #{$font-size-lg};
  
  // 圆角
  --van-border-radius-sm: #{$border-radius-sm};
  --van-border-radius-md: #{$border-radius-md};
  --van-border-radius-lg: #{$border-radius-lg};
  
  // 间距
  --van-padding-xs: #{$padding-xs};
  --van-padding-sm: #{$padding-sm};
  --van-padding-md: #{$padding-md};
  --van-padding-lg: #{$padding-lg};
  --van-padding-xl: #{$padding-xl};
  
  // 动画
  --van-animation-duration-base: #{$animation-duration-base};
  --van-animation-duration-fast: #{$animation-duration-fast};
}

// ==================== NavBar 导航栏 ====================

.van-nav-bar {
  background-color: $white;
  border-bottom: 1px solid $border-color;
  
  .van-nav-bar__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-color;
  }
  
  .van-nav-bar__left,
  .van-nav-bar__right {
    .van-icon {
      font-size: 18px;
      color: $text-color;
    }
  }
}

// ==================== Tabbar 标签栏 ====================

.van-tabbar {
  background-color: $white;
  border-top: 1px solid $border-color;
  @include safe-area(padding-bottom, bottom);
  
  .van-tabbar-item {
    &__text {
      font-size: $font-size-xs;
      line-height: $line-height-xs;
    }
    
    &__icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    &--active {
      .van-tabbar-item__text,
      .van-tabbar-item__icon {
        color: $primary-color;
      }
    }
  }
}

// ==================== Button 按钮 ====================

.van-button {
  font-family: $font-family;
  border-radius: $border-radius-md;
  @include transition();
  
  &--primary {
    background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
    border-color: $primary-color;
    
    &:active {
      background: $primary-dark;
      border-color: $primary-dark;
    }
  }
  
  &--success {
    background-color: $success-color;
    border-color: $success-color;
  }
  
  &--warning {
    background-color: $warning-color;
    border-color: $warning-color;
  }
  
  &--danger {
    background-color: $danger-color;
    border-color: $danger-color;
  }
  
  &--round {
    border-radius: $border-radius-xxl;
  }
  
  &--square {
    border-radius: 0;
  }
  
  &--loading {
    .van-loading__spinner {
      color: inherit;
    }
  }
}

// ==================== Cell 单元格 ====================

.van-cell {
  background-color: $white;
  border-bottom: 1px solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
  
  .van-cell__title {
    font-size: $font-size-md;
    color: $text-color;
  }
  
  .van-cell__value {
    font-size: $font-size-md;
    color: $text-color-2;
  }
  
  .van-cell__label {
    font-size: $font-size-sm;
    color: $text-color-3;
    line-height: $line-height-sm;
  }
  
  &--clickable {
    &:active {
      background-color: $gray-1;
    }
  }
}

// ==================== Field 输入框 ====================

.van-field {
  background-color: $white;
  
  .van-field__label {
    font-size: $font-size-md;
    color: $text-color;
    min-width: 80px;
  }
  
  .van-field__control {
    font-size: $font-size-md;
    color: $text-color;
    
    &::placeholder {
      color: $text-color-3;
    }
    
    &:disabled {
      color: $text-color-3;
      background-color: transparent;
    }
  }
  
  .van-field__error-message {
    font-size: $font-size-sm;
    color: $danger-color;
  }
  
  &--error {
    .van-field__control {
      color: $danger-color;
      border-color: $danger-color;
    }
  }
}

// ==================== Dialog 弹窗 ====================

.van-dialog {
  border-radius: $border-radius-lg;
  overflow: hidden;
  
  .van-dialog__header {
    padding: 20px 20px 12px;
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-color;
    text-align: center;
  }
  
  .van-dialog__content {
    padding: 12px 20px 20px;
    font-size: $font-size-md;
    color: $text-color-2;
    line-height: $line-height-lg;
    text-align: center;
  }
  
  .van-dialog__footer {
    border-top: 1px solid $border-color;
    
    .van-button {
      border: none;
      border-radius: 0;
      
      &:not(:last-child) {
        border-right: 1px solid $border-color;
      }
    }
  }
}

// ==================== Toast 轻提示 ====================

.van-toast {
  border-radius: $border-radius-lg;
  font-size: $font-size-md;
  
  .van-toast__text {
    line-height: $line-height-md;
  }
  
  &--success {
    background-color: rgba($success-color, 0.9);
  }
  
  &--fail {
    background-color: rgba($danger-color, 0.9);
  }
  
  &--loading {
    background-color: rgba($text-color, 0.8);
  }
}

// ==================== ActionSheet 动作面板 ====================

.van-action-sheet {
  border-radius: $border-radius-lg $border-radius-lg 0 0;
  
  .van-action-sheet__header {
    padding: 16px 20px 12px;
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-color;
    text-align: center;
    border-bottom: 1px solid $border-color;
  }
  
  .van-action-sheet__item {
    padding: 16px 20px;
    font-size: $font-size-md;
    color: $text-color;
    text-align: center;
    
    &:active {
      background-color: $gray-1;
    }
    
    &--disabled {
      color: $text-color-3;
    }
    
    &--loading {
      color: $text-color-3;
    }
  }
  
  .van-action-sheet__cancel {
    margin-top: 8px;
    background-color: $white;
    border-radius: $border-radius-lg $border-radius-lg 0 0;
  }
}

// ==================== Popup 弹出层 ====================

.van-popup {
  &--round {
    border-radius: $border-radius-lg;
    
    &.van-popup--bottom {
      border-radius: $border-radius-lg $border-radius-lg 0 0;
    }
    
    &.van-popup--top {
      border-radius: 0 0 $border-radius-lg $border-radius-lg;
    }
    
    &.van-popup--left {
      border-radius: 0 $border-radius-lg $border-radius-lg 0;
    }
    
    &.van-popup--right {
      border-radius: $border-radius-lg 0 0 $border-radius-lg;
    }
  }
}

// ==================== Picker 选择器 ====================

.van-picker {
  background-color: $white;
  
  .van-picker__toolbar {
    padding: 16px 20px;
    border-bottom: 1px solid $border-color;
  }
  
  .van-picker__cancel,
  .van-picker__confirm {
    font-size: $font-size-md;
    color: $primary-color;
  }
  
  .van-picker__title {
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-color;
  }
  
  .van-picker-column__item {
    font-size: $font-size-md;
    color: $text-color;
    
    &--disabled {
      color: $text-color-3;
    }
  }
}

// ==================== List 列表 ====================

.van-list {
  .van-list__loading,
  .van-list__finished-text {
    padding: 16px;
    font-size: $font-size-sm;
    color: $text-color-3;
    text-align: center;
  }
  
  .van-list__error-text {
    padding: 16px;
    font-size: $font-size-sm;
    color: $danger-color;
    text-align: center;
  }
}

// ==================== Empty 空状态 ====================

.van-empty {
  padding: 40px 20px;
  
  .van-empty__image {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }
  
  .van-empty__description {
    margin-top: 16px;
    font-size: $font-size-md;
    color: $text-color-3;
    line-height: $line-height-md;
  }
  
  .van-empty__bottom {
    margin-top: 20px;
  }
}

// ==================== Loading 加载 ====================

.van-loading {
  .van-loading__text {
    margin-top: 8px;
    font-size: $font-size-sm;
    color: $text-color-3;
  }
}

// ==================== NoticeBar 通知栏 ====================

.van-notice-bar {
  background-color: rgba($warning-color, 0.1);
  border: 1px solid rgba($warning-color, 0.2);
  
  .van-notice-bar__content {
    font-size: $font-size-sm;
    color: $warning-color;
  }
  
  .van-notice-bar__left-icon,
  .van-notice-bar__right-icon {
    color: $warning-color;
  }
}

// ==================== Tag 标签 ====================

.van-tag {
  border-radius: $border-radius-sm;
  font-size: $font-size-xs;
  
  &--primary {
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;
    border-color: rgba($primary-color, 0.2);
  }
  
  &--success {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
    border-color: rgba($success-color, 0.2);
  }
  
  &--warning {
    background-color: rgba($warning-color, 0.1);
    color: $warning-color;
    border-color: rgba($warning-color, 0.2);
  }
  
  &--danger {
    background-color: rgba($danger-color, 0.1);
    color: $danger-color;
    border-color: rgba($danger-color, 0.2);
  }
}

// ==================== Badge 徽标 ====================

.van-badge {
  .van-badge__wrapper {
    .van-badge {
      background-color: $danger-color;
      border: 1px solid $white;
      font-size: $font-size-xs;
      min-width: 16px;
      height: 16px;
      line-height: 14px;
    }
  }
}

// ==================== Image 图片 ====================

.van-image {
  border-radius: $border-radius-md;
  overflow: hidden;
  
  .van-image__error,
  .van-image__loading {
    background-color: $gray-1;
    color: $text-color-3;
    font-size: $font-size-sm;
  }
}

// ==================== Uploader 文件上传 ====================

.van-uploader {
  .van-uploader__upload {
    border: 1px dashed $border-color;
    border-radius: $border-radius-md;
    background-color: $gray-1;
    
    &:active {
      border-color: $primary-color;
      background-color: rgba($primary-color, 0.05);
    }
    
    .van-uploader__upload-icon {
      color: $text-color-3;
      font-size: 24px;
    }
    
    .van-uploader__upload-text {
      margin-top: 8px;
      font-size: $font-size-sm;
      color: $text-color-3;
    }
  }
  
  .van-uploader__preview {
    border-radius: $border-radius-md;
    overflow: hidden;
    
    .van-uploader__preview-delete {
      background-color: rgba($danger-color, 0.8);
      
      .van-icon {
        font-size: 14px;
      }
    }
  }
}

// ==================== Form 表单 ====================

.van-form {
  .van-form__label {
    font-size: $font-size-md;
    color: $text-color;
  }
  
  .van-form__error-message {
    font-size: $font-size-sm;
    color: $danger-color;
  }
}

// ==================== 响应式适配 ====================

@include respond-to(xs, max) {
  // 移动端特殊样式
  .van-dialog {
    margin: 20px;
    max-width: calc(100vw - 40px);
  }
  
  .van-action-sheet {
    max-height: 80vh;
  }
  
  .van-picker {
    max-height: 60vh;
  }
}

// ==================== 暗色主题适配 ====================

@media (prefers-color-scheme: dark) {
  .van-nav-bar,
  .van-tabbar,
  .van-cell,
  .van-field,
  .van-dialog,
  .van-action-sheet,
  .van-popup,
  .van-picker {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #404040;
  }
  
  .van-cell__title,
  .van-field__label,
  .van-dialog__header,
  .van-picker__title {
    color: #ffffff;
  }
  
  .van-cell__value,
  .van-field__control,
  .van-dialog__content {
    color: #cccccc;
  }
  
  .van-cell__label,
  .van-field__control::placeholder,
  .van-empty__description,
  .van-loading__text {
    color: #999999;
  }
}